<template>
	<view class="sale">
		<view class="list">
			<view class="item" v-for="(item, idx) in list" :key="idx" @click="goGoods(item)">
				<image :src="item.Img" class="item-img" mode="aspectFill" />
				<view class="item-info">
					<view class="item-title">{{ item.Name }}</view>
					<!-- <view class="item-count">1</view> -->
					<view class="item-price">¥{{ item.ShowPrice }}</view>
				</view>
			</view>
			<view v-if="!loading && list.length === 0" class="empty-tip">暂无数据</view>
		</view>
		<view class="footer-tip" v-if="list.length > 0 && !hasMore && !loading">没有更多了</view>
		<view class="footer-tip loading-tip" v-if="loading">加载中...</view>
	</view>
</template>

<script>
	import {
		useActiveApi
	} from "@/api/homePage";
	export default {
		name: "sale",
		data() {
			return {
				list: [],
				param: {
					Index: 1,
					Size: 10,
					FiledOrder: "sort desc",
				},
				hasMore: true,
				loading: false,
			};
		},
		onLoad(option) {
			if (option) {
				if (option.ProductName == "9.9") {
					uni.setNavigationBarTitle({
						title: "9.9特价海岛饮品",
					});
				}
				// 只合并查询相关字段，保留分页和排序配置
				Object.assign(this.param, option);
				this.param.Index = 1; // 重置页码
			}
			this.list = [];
			this.hasMore = true;
			this.loading = false;
			this.getData();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			goGoods(item){
				console.log("item =>",item);
				let url = `/mall_subpages/goods/index?id=${item.Id}&type=${item.Type}`;
				uni.navigateTo({
					url
				})
			},
			async getData() {
				if (this.loading) return;
				this.loading = true;
				const res = await useActiveApi(this.param);
				console.log("特价区 res=>", res);
				if (res.Code == "200") {
					const data = res.Data || [];
					if (this.param.Index === 1) {
						this.list = data;
					} else {
						this.list = this.list.concat(data);
					}
					const total = Number(res.Total) || 0;
					this.hasMore = this.list.length < total;
				} else {
					if (this.param.Index === 1) this.list = [];
					this.hasMore = false;
				}
				this.loading = false;
			},
			loadMore() {
				if (!this.hasMore || this.loading) return;
				this.param.Index += 1;
				this.getData();
			},
		},
	};
</script>

<style lang="less" scoped>
	.sale {
		width: 100%;
		min-height: 100vh;
		background: #eee;

		.list {
			padding: 20rpx;

			.item {
				display: flex;
				background: #fff;
				border-radius: 16rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
				margin-bottom: 24rpx;
				padding: 20rpx;
				align-items: flex-start;

				.item-img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 12rpx;
					margin-right: 20rpx;
					object-fit: cover;
				}

				.item-info {
					flex: 1;
					padding-top: 10rpx;
					.item-title {
						font-size: 30rpx;
						font-weight: 500;
						color: #222;
						margin-bottom: 16rpx;
						min-height: 70rpx;
					}


					.item-count {
						font-size: 26rpx;
						color: #888;
						padding-bottom: 5rpx;
					}

					.item-price {
						font-size: 32rpx;
						color: #f44;
						font-weight: bold;
					}
				}
			}
			.empty-tip {
				text-align: center;
				color: #aaa;
				font-size: 28rpx;
				padding: 80rpx 0 40rpx;
			}
		}
		.footer-tip {
			text-align: center;
			color: #bbb;
			font-size: 26rpx;
			padding: 32rpx 0 80rpx;
		}
		.loading-tip {
			color: #498fff;
		}
	}
</style>